<template>
    <div class="publish-section">
        <div class="publish-card">
            <div class="publish-content">
                <div class="publish-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
                        <rect x="8" y="16" width="48" height="32" rx="4" ry="4" fill="#e6f7ff" stroke="#1890ff"
                            stroke-width="2" stroke-linejoin="round" />
                        <path d="M24 28h16M24 36h16" stroke="#1890ff" stroke-width="2" stroke-linecap="round" />
                        <circle cx="48" cy="48" r="8" fill="#1890ff"></circle>
                        <path d="M45 48l2 2 4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </div>
                <p class="publish-message">创建成功！</p>
                <div class="publish-actions">
                    <!-- 已移除“启动同步”按钮 -->
                    <a-button class="action-button" @click="$emit('save')" :loading="saving">保存</a-button>
                    <a-button class="action-button" @click="$emit('cancel')" :disabled="saving">取消</a-button>
                </div>
            </div>

            <div v-if="saving" class="saving-mask">
                <div class="saving-box">
                    <a-spin size="large" tip="正在保存..." />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps<{ saving: boolean }>()
defineEmits<{ (e: 'save'): void; (e: 'cancel'): void }>() // 已移除 startSync
</script>

<style scoped lang="less">
.publish-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.publish-content {
    text-align: center;
}

.publish-message {
    font-size: 18px;
    font-weight: 500;
    color: #262626;
    margin-bottom: 24px;
}

.publish-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.action-button {
    width: 120px;
}

.publish-card {
    position: relative;
}

.saving-mask {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.saving-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 120px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
</style>
